<template>
  <div class="map-body" id="map_detail"></div>
</template>
<script setup>
  import { onMounted } from 'vue';
  import MapJS from '/@/views/monitor/components/map/js/index.js';
  import MethodsJS from '/@/views/monitor/components/map/js/methods.js';
  import DrawJS from '/@/views/monitor/components/map/js/draw.js';
  import { moveToCenterByLonAndLat } from '/@/views/monitor/components/map/js/util.js';
  import { api } from '/@/api/plat/fusion-track.js';
  import { api as areaApi } from '/@/api/plat/area.js';

  const props = defineProps({
    alarmInfo: {
      type: Object,
      default: () => {},
    },
  });
  let mapTarget = null;
  let MapConfig = {
    center: [119.45206246145788, 29.17467466774048],
    zoom: 16,
    EPSGCode: 'EPSG:3857',
    mapZIndexLimit: [4, 18],
    shipZoomLimit: [12, 16],
    target: 'map_detail', // 元素节点
  };

  // 初始化海图
  const initMainMap = () => {
    mapTarget = MapJS.initMap(MapConfig);
    MapJS.initGraticule(mapTarget);
    // initMapMethod(mapTarget);
    // 绘制区域
    drawArea();
    // 绘制轨迹
    drawPoints();
    // 绘制水位计
    if (props.alarmInfo.waterValue) {
      DrawJS.drawWaterPoint(mapTarget, [
        {
          latitude: 29.174735,
          longitude: 119.452047,
          value: props.alarmInfo.waterValue,
        },
      ]);
    }
  };

  // 获取区域并绘制
  function drawArea() {
    areaApi.getDetailById(props.alarmInfo.areaId).then(({ data }) => {
      DrawJS.drawArea(mapTarget, [data]);
    });
  }

  function drawPoints() {
    api.queryList({ targetId: props.alarmInfo.targetId, startTime: props.alarmInfo.startTime, endTime: props.alarmInfo.endTime }).then(({ data }) => {
      DrawJS.drawPointsTravel(
        mapTarget,
        data.map((m) => [m.longitude, m.latitude, m.course]),
        'Points_Travel'
      );
      const row = data[data.length - 1];
      moveToCenterByLonAndLat([row.longitude, row.latitude], mapTarget, 15);
    });
  }
  onMounted(initMainMap);
</script>

<style lang="less" scoped>
  #map_detail {
    width: 100%;
    height: 100%;
    background-color: #99b3cc;
  }
</style>
